<template>
  <div id="content">
    <van-nav-bar title="宠物分类" :border="false" />
    <div class="label">
      <span @click="getAllType">全部</span>
      <span @click="getTypeCat('猫猫')">猫猫</span>
      <span @click="getTypeCat('狗狗')">狗狗</span>
      <span @click="getTypeCat('其他')">其他</span>
      <span @click="flag = !flag"><van-icon name="filter-o" />筛选</span>
    </div>
    <div class="highly">
      <div class="body">
        <RouterLink
          :to="`/adoptDetail/${item.nid}`"
          v-for="item in All"
          :key="item.nid"
        >
          <Recommend
            :imgname="item.imgname"
            :title="item.nickname"
            :age="item.age"
            :label="item.status"
            :sex="item.sex"
            :area="item.area"
          />
        </RouterLink>
      </div>
    </div>
    <div class="popup" v-if="flag">
      <van-nav-bar
        title="筛选"
        left-arrow
        :border="false"
        @click-left="flag = !flag"
      >
        <template #left>
          <van-icon name="cross" size="20" />
        </template>
      </van-nav-bar>
      <span>年龄</span>
      <ul>
        <li ref="age1" @click="checkBox(1, 4, 'age')">全部</li>
        <li ref="age2" @click="checkBox(2, 4, 'age')">0~3岁</li>
        <li ref="age3" @click="checkBox(3, 4, 'age')">4~15岁</li>
        <li ref="age4" @click="checkBox(4, 4, 'age')">>15岁</li>
      </ul>
      <span>性别</span>
      <ul>
        <li ref="sex1" @click="checkBox(1, 3, 'sex')">全部</li>
        <li ref="sex2" @click="checkBox(2, 3, 'sex')">男孩</li>
        <li ref="sex3" @click="checkBox(3, 3, 'sex')">女孩</li>
      </ul>
      <span>状况</span>
      <ul>
        <li ref="status1" @click="checkBox(1, 4, 'status')">全部</li>
        <li ref="status2" @click="checkBox(2, 4, 'status')">已驱虫</li>
        <li ref="status3" @click="checkBox(3, 4, 'status')">已绝育</li>
        <li ref="status4" @click="checkBox(4, 4, 'status')">已免疫</li>
      </ul>
      <van-button round type="danger" color="#333333">重置</van-button>
      <van-button
        round
        type="danger"
        color="#ed4844"
        @click="pick(age, sex, status)"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import Recommend from "@/components/recommend.vue";
import { getTypeAll, getType } from "@/api/recommend";
export default {
  data() {
    return {
      // 展示区所有数据
      All: "",
      // 年龄
      age: "",
      // 性别
      sex: "",
      // 状况
      status: "",
      // 弹出框的显示与隐藏
      flag: false,
    };
  },
  methods: {
    // 获取所有分类数据
    getAllType() {
      getTypeAll().then(res => {
        this.All = res.data.message;
      });
    },
    // 根据分类获取数据
    getTypeCat(category) {
      getType({ type: category }).then(res => {
        this.All = res.data.message;
        console.log(this.type);
      });
    },

    // 封装checkBox函数
    checkBox(n, length, refval) {
      if (eval(`this.$refs.${refval}${n}`).innerHTML != "全部") {
        if (
          eval(`this.$refs.${refval}${n}`).innerHTML == "0~3岁" ||
          eval(`this.$refs.${refval}${n}`).innerHTML == "4~15岁" ||
          eval(`this.$refs.${refval}${n}`).innerHTML == "&gt;15岁"
        ) {
          this.age = eval(`this.$refs.${refval}${n}`).innerHTML;
        }
        if (
          eval(`this.$refs.${refval}${n}`).innerHTML == "男孩" ||
          eval(`this.$refs.${refval}${n}`).innerHTML == "女孩"
        ) {
          this.sex = eval(`this.$refs.${refval}${n}`).innerHTML;
        }
        if (
          eval(`this.$refs.${refval}${n}`).innerHTML == "已驱虫" ||
          eval(`this.$refs.${refval}${n}`).innerHTML == "已绝育" ||
          eval(`this.$refs.${refval}${n}`).innerHTML == "已免疫"
        ) {
          this.status = eval(`this.$refs.${refval}${n}`).innerHTML;
        }
      }
      for (let i = 1; i <= length; i++) {
        eval(`this.$refs.${refval}${i}`).style.color = "black";
        eval(`this.$refs.${refval}${i}`).style.border = "1px solid white";
      }
      eval(`this.$refs.${refval}${n}`).style.color = "#e44b4d";
      eval(`this.$refs.${refval}${n}`).style.border = "1px solid #e44b4d";
    },

    // 点击确定，筛选数据，关闭弹出框
    pick(age, sex, status) {
      console.log(age, sex, status);
      // 发起请求，获取所有数据
      getTypeAll().then(res => {
        // 1.筛选符合年龄的宠物
        let a = [];
        if (age == "0~3岁") {
          a = [];
          res.data.message.forEach(item => {
            if (
              item.age.indexOf("月") ||
              item.age == "1岁" ||
              item.age == "2岁" ||
              item.age == "3岁"
            ) {
              a.push(item);
            }
          });
        }
        if (age == "4~15岁") {
          a = [];
          res.data.message.forEach(item => {
            if (
              parseInt(item.age) > 3 &&
              parseInt(item.age) < 16 &&
              item.age.indexOf("岁") != -1
            ) {
              console.log("4~15岁");
              console.log(item.age.indexOf("岁") != -1);
              a.push(item);
            }
          });
        }
        if (age == "&gt;15岁") {
          a = [];
          res.data.message.forEach(item => {
            if (parseInt(item.age) > 15) {
              a.push(item);
            }
          });
        }
        if (age == "") {
          res.data.message.forEach(item => {
            a.push(item);
          });
        }

        // 2.筛选符合性别的宠物
        let b = [];
        if (sex == "男孩") {
          b = [];
          a.forEach(item => {
            if (item.sex == 0) {
              b.push(item);
            }
          });
        }

        if (sex == "女孩") {
          b = [];
          a.forEach(item => {
            if (item.sex == 1) {
              b.push(item);
            }
          });
        }

        if (sex == "") {
          b = [];
          a.forEach(item => {
            b.push(item);
          });
        }

        // 3.筛选出符合状态的宠物
        let c = [];
        if (status == "已驱虫") {
          c = [];
          b.forEach(item => {
            if (item.status.indexOf("已驱虫") != -1) {
              c.push(item);
            }
          });
        }
        if (status == "已绝育") {
          c = [];
          b.forEach(item => {
            if (item.status.indexOf("已绝育") != -1) {
              c.push(item);
            }
          });
        }
        if (status == "已免疫") {
          c = [];
          b.forEach(item => {
            if (item.status.indexOf("已免疫") != -1) {
              c.push(item);
            }
          });
        }
        if (status == "") {
          b.forEach(item => {
            c.push(item);
          });
        }
        // 4.将筛选出的最终结果赋给this.All
        this.All = c;
        // 5.清除记录
        a = [];
        b = [];
        c = [];
        this.flag = !this.flag;
        console.log(this.All);
      });
    },
  },
  components: {
    Recommend,
  },
  mounted() {
    this.getAllType();
  },
};
</script>

<style lang="scss" scoped>
#content {
  width: 100%;
  height: 100vh;
  background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  border-top: 1px solid #face24;
  position: relative;

  > .van-nav-bar {
    margin-top: 30px;
    background: none;

    ::v-deep .van-nav-bar__title {
      font-size: 20px;
      font-family: "黑体";
    }
  }

  .label {
    width: 90%;
    margin: 0 auto;
    font-family: "黑体";
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    span {
      display: inline-block;
      // background: #ed4844;
      margin: 0 5px;
      width: 45px;
      height: 25px;
      text-align: center;
      border-radius: 50px;

      &:last-child {
        margin-left: 56px;
        margin-right: 0;
        width: 48px;
        border-radius: 0;
      }

      &:active {
        color: red;
      }
    }
  }
  .highly {
    height: 502px;
    // background-color: #face23;
    overflow: scroll;
    .body {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  }

  .popup {
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    margin: 0;
    background: white;
    height: 360px;
    // background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));

    .van-nav-bar {
      background: none;

      ::v-deep .van-nav-bar__title {
        font-size: 16px;
        font-family: "黑体";
      }

      ::v-deep .van-icon {
        color: black;
      }
    }

    > span {
      font-size: 16px;
      margin-left: 13px;
    }
    > ul {
      list-style: none;
      display: flex;
      margin: 10px 0 15px 13px;
      padding: 0;
      position: relative;
      font-size: 14px;

      li {
        margin: 0;
        padding: 0;
        margin-right: 20px;
        width: 68px;
        height: 30px;
        line-height: 30px;
        background: #f6f6f6;
        text-align: center;
        border-radius: 50px;
        border: 1px solid white;
        &:last-child {
          margin-right: 0;
        }

        &:first-child {
          border: 1px solid #e44b4d;
          color: #e44b4d;
        }
      }
    }

    .van-button {
      width: 110px;
      height: 35px;
      margin: 18px 30px 0 54px;

      &:last-child {
        margin-left: 0;
      }
    }
  }
}
</style>
